<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="//cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" charset="utf-8" href="//cdn.bootcss.com/metisMenu/3.0.3/metisMenu.min.css"/>
    <link type="text/css" rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" />

    <link type="text/css" rel="stylesheet" charset="utf-8" href="../../lib/popup-selector/popup-selector.css" />

    <script type="text/javascript" charset="utf-8" src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="//cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="//cdn.bootcss.com/metisMenu/3.0.3/metisMenu.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="//cdn.bootcss.com/Sortable/1.8.3/Sortable.min.js"></script>

    <script type="text/javascript" charset="utf-8" src="../../lib/event-patch.js"></script>
    <script type="text/javascript" charset="utf-8" src="../../lib/popup-selector/popup-selector.js"></script>

</head>
<body>
<input type="text" id="holder" placeholder="test-box" style="position: absolute;top:568px;left:242px;"/>
<div id="backup">
    <div id="btn-panel">
        <table class="table">
            <tr>
                <th>ID</th><th>Name</th>
            </tr>
        </table>
        <a class="btn btn-success" id="btn-ok">OK Button</a>
    </div>
</div>
<script>
$(function () {
    $('#btn-ok').on ('click', function () {popuper.popupSelector ('hide')});
    var popuper = $('#holder').popupSelector ({
        body:'#btn-panel', hide_when_mask_clicked:false
        /*auto_close:true, auto_clean:true, */
    }).on ('hidden.bs.popup', function () {
        $('#btn-panel').appendTo ($('#backup'));
    }).on ('show.bs.popup', function () {
        var table = $('.table').empty();
        $('<tr><th>ID</th><th>Name</th></tr>').appendTo (table);
        while (table[0].rows.length > 1) {
            table[0].removeRow (1);
        }
        var count = Math.floor(Math.random () * 20 + 1);
        for (var i = 0; i < count; i ++) {
            $('<tr/>').append ($('<td/>').text (i)).append ($('<td/>').text ('row [' + i + ']')).appendTo (table);
        }
    });
});
</script>
</body>
</html>